<template>
	<el-dialog :close-on-click-modal="false" :title="`${mode === 'add' ? '新增' : '修改'}证书`" width="600px" v-model="visible" @confirm="confirm"
		@cancel="visible = false" @close="closeDialog">
		<div class="formData">
			<el-form :model="formData" ref="ruleForm" label-width="100px" :rules="rules">
				<el-form-item label="所属员工" prop="crewId">
					<RemoteSelect type="STAFF_INFO" placeholder="请输入所属员工" v-model:value="formData.crewId" v-model:label="formData.crewName" />
				</el-form-item>
				<el-form-item label="证书名称" prop="certName">
					<el-input v-model="formData.certName" placeholder="请填写证书名称" />
				</el-form-item>
				<el-form-item label="证书编号" prop="certNo">
					<el-input v-model="formData.certNo" placeholder="请填写证书编号" />
				</el-form-item>
				<el-form-item label="证书类别" prop="certTypeId">
					<Select placeholder="请选择证书类别" :dataConfig="{ params: { type: 'DICT',dictType:'CREW_CERTIFICATE' } }" v-model:value="formData.certTypeId" v-model:label="formData.certTypeName"/>
				</el-form-item>
				<el-form-item label="起始日期" prop="beginDate">
					<el-date-picker v-model="formData.beginDate" value-format="YYYY-MM-DD" type="date"
						placeholder="请选择起始日期" />
				</el-form-item>
				<el-form-item label="截止日期" prop="endDate">
					<el-date-picker v-model="formData.endDate" value-format="YYYY-MM-DD" type="date"
						placeholder="请选择截至日期" />
				</el-form-item>
				<el-form-item label="附件" prop="attachUrl" style="width: 100%">
					<upload businessType="SEMAN_CERT" businessId="" :fileList1="fileList" @changeFile="changeFile" fileTypeName=".jpeg, .png, .jpg" />
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="confirm">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import {
		ElMessage,
		ElMessageBox,
		ElNotification
	} from "element-plus";
	import api from '@/api/basicData/crewCertificate/index'
import Select from '@/components/Select/index.vue'
	import RemoteSelect from '@/components/RemoteSelect/index.vue';
	import upload from '@/components/upload.vue';
	const emit = defineEmits(['callback'])

	const selects = ref({
		shipKindCode: [{
				label: '类型1',
				value: 0
			},
			{
				label: '类型2',
				value: 1
			},
			{
				label: '类型3',
				value: 2
			}
		],
		tradeType: [{
				label: "内贸",
				value: 'N'
			},
			{
				label: "外贸",
				value: 'W'
			},
		]
	})

	const visible = ref(false)
	const mode = ref('add')
	const row = ref({})
	const fileList = ref([])
	const formData = ref({
		crewId: '',
		staffName: '',
		certName: '',
		certNo: '',
		certTypeId: '',
		certTypeName: '',
		beginDate: '',
		endDate: '',
		attachUrl: ''
	})
	const ruleForm = ref({})

	const rules = ref({

		crewId: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		certNo: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		certName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		beginDate: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		endDate: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		/* attachUrl: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}] */
	})
	// 文件上传
	const changeFile = file => {
		formData.value.attachUrl = file.join(',')
	}
	// 展示
	const show = params => {
		visible.value = true
		mode.value = params?.mode || 'add'
		if (mode.value === 'edit') {
			row.value = params.row
			editInit()
		}
	}
	// 编辑
	const editInit = async () => {
		api.getDetailById({id:row.value.id}).then(res=>{
			  formData.value = res.data
			  formData.value.certTypeName = '';
			  formData.value.attachUrl = formData.value.attachId;
			  fileList.value = []
			  // 判断是否已有上传的文件
			  if(formData.value.attachList.length > 0){
				  formData.value.attachList.forEach(item=>{
					  fileList.value.push({id:item.fileId,fileSuffix:item.url.substring(item.url.lastIndexOf('.'),item.url.length),fileName:item.url.substring(item.url.lastIndexOf('/')+1,item.url.length)});
				  })
			  }
			  value.formData.crewId += ''
		})
	}
	// 确认
	const confirm = () => {
		ruleForm.value.validate(valid => {
			if (valid) {
				let request
				if (mode.value === 'add') {
					request = api.save
					delete formData.value.id
				} else {
					request = api.save
				}
				request(formData.value).then(res => {
					if (res.code == '200') {
						ElMessage.success('保存成功')
						visible.value = false
						emit('callback')
					} else {
						ElMessage.error(res.msg)
					}
				})
			} else {
				ElMessage.warning('请完善表单信息！')
			}
		})
	}

	// 重置
	const closeDialog = () => {
		nextTick(() => {
			visible.value = false
			fileList.value = []
			ruleForm.value.resetFields()
		})
	}
	defineExpose({
		show
	})
</script>